---
title: Format data
---

import siteConfig from '/docusaurus.config.js';

Data is formatted using the data type setting in the schema. The data type is mapped to the `grid.formatters` object. In the following example col2 is data type `date` which will format data using the `grid.formatters.date` function. By default the string formatter is used to format all data. This method of formatting is faster than using the [`rendertext`](/reference/events#rendertext) event.

<SandpackEditor>

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  schema: [
    { name: 'col1' },
    {
      name: 'col2',
      type: 'date',
    },
    { name: 'col3' },
  ],
});

grid.formatters.date = function (e) {
  return new Date(e.cell.value).toISOString();
};

app.append(gridElement);
```

```json data.json
[
  { "col1": "foo", "col2": 1501744914661, "col3": "a" },
  { "col1": "bar", "col2": 1301744914661, "col3": "b" },
  { "col1": "baz", "col2": 1401744914661, "col3": "c" }
]
```

</SandpackEditor>
